/*!
 * 服务诉求屏4
 * author:buly;
 * data:2016-12-11;
 */

(function(win, $) {
    var chartAppeal, //设区市上月诉求
        appealTotal,
        chartForthwith, //即时答复率
        chartOntime, //按时答复率
        chartSatisfy; //回访满意率
    var chartOption;
    var areaCode = Util.getUrlParams("areacode");
    
    setInterval(refreshChart, 1000 * 60);
    
    function refreshChart(){
    	var params = {
    		areacode : areaCode	
    	};
		Util.ajax({
			url : "/rest/refresh/areatotal",
			data : params,
			success : function(data) {
				renderNum(data.number);
			}
		});
	}	

    $('body').on('click', function(params) {
		//测试方法
//		window.open(_rootPath+"/jsscreen/serviceappeal/subscreen03?areacode=" + areaCode);
		//rabitmq队列发送，调用消息队列的方法
//    		var url="/jsscreen/serviceappeal/subscreen02?areacode=" + areaCode;
//    		sendRabbitMq(url);
    });
    var initChart = function() {
        // #region 设区市上月诉求
        chartAppeal = echarts.init(document.getElementById('chartappeal'));
        chartOption = {
            color: ['#1bd6bc'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                	interval: 2,
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                data: []
            }],
            yAxis: [{
                name:'件',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 22,
                    fontWeight: 'lighter',
                    fontFamily: "Microsoft YaHei"
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#aaa'
                    }
                }
            }],
            series: [{
                name: '设区市上月诉求',
                type: 'line',
                barWidth: '50%'
            }]
        };
        chartAppeal.setOption(chartOption);
        chartTotal = echarts.init(document.getElementById('appealtotal'));
        chartOption = {
            color: ['#1bd6bc'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: 40,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                nameLocation:'start',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate:'-45',
                    nameGap:100,
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                },
                data: []
            }],
            yAxis: [{
                name:'件',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 22,
                    fontWeight: 'lighter',
                    fontFamily: "Microsoft YaHei"
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#aaa'
                    }
                }
            }],
            series: [{
                name: '设区市上月诉求',
                type: 'bar',
                barWidth: '40%'
            }]
        };
        chartTotal.setOption(chartOption);
        // #endregion

        // #region 即时答复率
        chartForthwith = echarts.init(document.getElementById('chartforthwith'));
        chartOption = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                type: 'gauge',
                radius:'90%',
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color: [
                            [0.3, '#ffa500'],
                            [0.7, '#87ceeb'],
                            [1, '#22ac38']
                        ]
                    }
                },
                axisLabel:{
                	textStyle:{
                		color:'#fff',
                		fontSize:20
                	}
                },
                axisTick:{
                	show:false
                },
                detail: { 
                	formatter: '{value}%',
                	textStyle:{
                		color:'#f7e444',
                		fontSize:40
                	},
                	offsetCenter: [0, '70%'],
                },
                data: []
            }]
        };
        chartForthwith.setOption(chartOption);
        // #endregion

        // #region 按时答复率
        chartOntime = echarts.init(document.getElementById('chartontime'));
        chartOntime.setOption(chartOption);
        // #endregion

        // #region 回访满意率
        chartSatisfy = echarts.init(document.getElementById('chartsatisfy'));
        chartSatisfy.setOption(chartOption);
        // #endregion
    };

    //渲染设区市上月诉求
    var renderAppeal = function(data) {
        var name = [],
            value = [];
        $.each(data, function(i, e) {
            name.push(e.name);
            value.push(e.value);
        });
        chartAppeal.setOption({
            xAxis: [{
                data: name
            }],
            series: [{
                data: value
            }]
        });
    };
    var renderTotal = function(data) {
        console.log(data);
        var name = [],
            value = [];
        $.each(data, function(i, e) {
            name.push(e.time);
            value.push(e.value);
        });
        chartTotal.setOption({
            xAxis: [{
                data: name
            }],
            series: [{
                data: value
            }]
        });
    };

    //渲染即时答复率
    var renderForthwith = function(data) {
        chartForthwith.setOption({
            series: [{
                name: data.name,
                data: data.value
            }]
        });
    };

    //渲染按时答复率
    var renderOntime = function(data) {
        chartOntime.setOption({
            series: [{
                name: data.name,
                data: data.value
            }]
        });
    };

    //渲染回访满意率
    var renderSatisfy = function(data) {
        chartSatisfy.setOption({
            series: [{
                name: data.name,
                data: data.value
            }]
        });
    };

    var renderCity = function(data){
        $('h2').text(data);
    }
    
    var renderType = function(data , $appealtype){
        $.each(data,function(i,e){
            $appealtype.children('dt').eq(i).text(e.name);
            $appealtype.children('dd').eq(i).children('span').text(e.value+'%');
            $appealtype.children('dd').eq(i).find('em').css('width',e.value+'%')
        })
        console.log();
    }
    
    var renderTypea = function(data){
        console.log(data.length);
        $.each(data,function(i,e){
            $('#dls').find('dt').eq(i).text(e.name);
            $('#dls').find('dd').eq(i).children('span').text(e.value+'%');
            $('#dls').find('dd').eq(i).find('em').css('width',e.value+'%');
        })
        var x = (602-82*data.length)/(data.length+1);
        $('#dls dl').css('marginBottom',x+54);
    }
    
    renderNum = function(data){
        console.log(data);
        $('#num em').eq(0).text(data[0]);
        $('#num em').eq(1).text(data[1]);
        $('#num em').eq(2).text(data[2]);
        $('#num em').eq(3).text(data[3]);
    }

    var requestData = function() {
    	var params = {
        	areacode : areaCode
        };
        Util.ajax({
            url: settings.getmember,
            data: params,
            success: function(data) {
                renderAppeal(data.appeal);
                renderTotal(data.total);
                renderForthwith(data.forthwith);
                renderOntime(data.ontime);
                renderSatisfy(data.satisfy);
                renderType(data.type,$('#type dl'));
                for( var i = 0; i<data.appealall.length;i++){
                    $('#dls').append(' <dl><dt></dt><dd><i><em></em></i><span></span></dd></dl>')
                }
                renderTypea(data.appealall);
                renderNum(data.number);
                renderCity(data.city);
            }
        });
    };

    initChart();
    requestData();
    
    var sendRabbitMq = function(url) {
		Util.ajax({
			//send_url为写死的地址  send为活的地址
			url : "/rest/sndrabbitmq/send",
			type : "post",
			data : {
				one : url,
			}
		})
	}
    
}(this, jQuery));
